<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>SVG</title>
  <style>
    circle{
      cursor: pointer;
      border: 10px solid red;
    }
  </style>
</head>
<body>
  <!-- svg 元素由svg包裹实现 -->
  <svg width="200" height="300">
    <!-- 可以定义a标签，用来实现页面跳转 -->
    <a href="http://www.baidu.com" target="_blank">
      <!-- 这是一个矩形 -->
      <rect height="30" width="30" y="0" x="0">
        <!-- animate用于绘制动画 -->
        <!-- <animate attributeName="x" from="0" to="120" dur="5s" repeatCount="indefinite"></animate> -->
        <animateTransform attributeName="transform" type="rotate" 
        from="0 50 50" to="360 50 50" dur="5s" repeatCount="indefinite"></animateTransform>
      </rect>
    </a>
  </svg>
  <svg width="500" height="500">
    <!-- circle用于绘制圆形 -->
    <circle cx="60" cy="60" r="50"/>

  </svg>
  <svg width="120" height="120"
  viewPort="0 0 120 120" version="1.1"
  xmlns="http://www.w3.org/2000/svg">

    <!-- 用于 定义以后需要重复使用的图形元素 -->
    <defs>
    <!-- 用于绘制截取的边界 -->
    <clipPath id="myClip">
        <circle cx="0" cy="0" r="20"/>
        <circle cx="70" cy="70" r="20"/>
    </clipPath>
    </defs>
    <!-- 给了一个id，用来确定被截取的部分是myClip中的内容 -->
    <rect x="0" y="0" width="100" height="100"
      clip-path="url(#myClip)"/>
  </svg>
  <svg width='190' height="150">
    <line x1="0" y1="0" x2="100" y2="89" fill="red"></line>
  </svg>
  <svg width="600" height="300">
    <defs>
      <linearGradient id="Gradient01">
        <stop offset="20%" stop-color="#39F"></stop>
        <stop offset="80%" stop-color="#F3F"></stop>
      </linearGradient>
    </defs>
    <circle cx="100" cy="100" r="30" fill="url(#Gradient01)"/>
    <rect  x="10" y="10" width="360" height="30" fill="url(#Gradient01)"  />
    <ellipse cx="200" cy="200" rx="30" ry="50"/>
    
    
    <path d="M 100 100 L 300 100 L 200 300 z"
    fill="orange" stroke="black" stroke-width="3" />


    <g stroke="green" fill="white" stroke-width="5">
      <circle cx="25" cy="25" r="15" />
      <circle cx="40" cy="25" r="15" />
      <circle cx="55" cy="25" r="15" />
      <circle cx="70" cy="25" r="15" />
    </g>


  </svg>





  <svg xmlns="http://www.w3.org/2000/svg"
    width="100px" height="30px" viewBox="0 0 1000 300">

  <text x="250" y="150" 
      font-family="Verdana" 
      font-size="55">
  Hello, out there
  </text>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="998" height="298"
      fill="none" stroke="1" stroke-width="2" />
  </svg>
</body>
</html>